<template>
  <div>

    <sky-panel title="分栏布局">
      <template v-slot:main>

        <sky-layout-row :gutter="20">
          <sky-layout-col :span="12">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="12">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row :gutter="20">
          <sky-layout-col :span="8">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="16">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row :gutter="20">
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

      </template>
    </sky-panel>

  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    setup() {},
  });
</script>

<style lang="scss" scoped>
/**容器内占位符样式 */
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
